<template>
	<view>
		<view class="search align-center justify-center flex">
			<view class="top-search flex align-center justify-between">
				<input placeholder="请输入关键字搜索" confirm-type="search" v-on:click="toInputSearch"  @confirm="toInputResult" v-model="searchKey" />
				<text class="lg text-gray cuIcon-search"></text>
			</view>
			<text class="search_btn">搜索</text>
		</view>
		<!-- <image class="banner" src="/static/banner.png"></image> -->
		<!-- <image class="banner" :src="dyadroollist[0].img_url"></image> -->
		<view class="lunbo">
			<swiper interval="2000" indicator-dots="true" autoplay="true" indicator-active-color="#fff" style="height:350rpx">
				<swiper-item v-for="(item,index) in dyadroollist">
					<image class="banner" :src="item.img_url" @tap="toBunnerUrl(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--热卖专区-->
		<view class="hot" v-if="viewhot">
			<view class="hot_top">
				<view class="hot_top_left">
					<image src="@/static/hot_title.png" mode="heightFix" style="height:35rpx"></image>
				</view>
				<view class="hot_top_right"><view>精挑细选，享受购物</view><view @tap="toHotGoodsListMore">更多></view></view>
			</view>
			<view class="hotlist">
				<view class="goods">
					<view class="flex align-center flex-direction justify-center item" v-for="(item1,index1) in hotGoodsList" @tap="toGoodsDetail(item1)">
						<image :src="item1.img_url" mode="aspectFit" class="img"></image>
						<text class="title text-cut">{{item1.title}}</text>
						<text class="price">￥{{item1.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<!--新品专区-->
		<view class="hot" v-if="viewred">
			<view class="hot_top">
				<view class="hot_top_left">
					<image src="@/static/rew_title.png" mode="heightFix" style="height:35rpx"></image>
				</view>
				<view class="hot_top_right"><view>精挑细选，享受购物</view><view @tap="toRedGoodsListMore">更多></view></view>
			</view>
			<view class="hotlist">
				
				<view class="goods">
					<view class="flex align-center flex-direction justify-center item" v-for="(item1,index1) in redGoodsList" @tap="toGoodsDetail(item1)">
						<image :src="item1.img_url" mode="aspectFit" class="img"></image>
						<text class="title text-cut">{{item1.title}}</text>
						<text class="price">￥{{item1.price}}</text>
					</view>
				</view>
		
			</view>
		</view>
		<!--优惠专区-->
		<view class="discount"  v-if="viewyh">
			<view class="discount_top">
				<view class="discount_top_left">
					<image src="@/static/youhui_title.png" mode="heightFix" style="height:35rpx"></image>
				</view>
				<view class="discount_top_right"><view>精挑细选，享受购物</view><view @tap="toActiveGoodsListMore">更多></view></view>
			</view>			
		</view>
		
		<view class="content"  v-if="viewyh">
			<view class="discountlist">
				<block v-for="(item,index) in activeGoodsList">
					<view class="recommend-item flex flex-direction discountitem" @tap="toGoodsDetail(item)">
						<image class="recommend-img1" :src="item.img_url" mode="aspectFit"></image>
						<text>{{item.title}}</text>
						<view class="recommend-bto flex align-center justify-between">
							<text class="text-price">{{item.price}}</text>
							<view class="flex align-center justify-center">
								<image src="/static/plus.png" mode="widthFix" style="height:72rpx;"></image>
							</view>
						</view>
					</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				refreshing: false,
				title: 'Hello',
				redGoodsList: [],
				activeGoodsList: [],
				dyadroollist: [],
				searchKey: '',
				selectList: [],
				hotGoodsList:[],
				viewhot:0,
				viewred:0,
				viewyh:0
			}
		},
		onLoad() {
			//this.loadSwiper()
			this.getHotGoodsSys()
			this.getRedGoodsSys()
			this.getsysActive()
			this.getIndexGoodsList()
			//this.loadRedGoodsList()
			//this.loadActiveGoodsList()
			//this.loadAllGoodsCategory()

		},
		onReachBottom() {
			console.log('滑动到页面底部')
		},
		onPullDownRefresh() {
			console.log('下拉刷新');
			this.refreshing = true;
			this.getIndexGoodsList()
			//this.loadRedGoodsList()
			this.loadActiveGoodsList()
			this.loadAllGoodsCategory()
			//this.loadSwiper()
		},
		methods: {
			getRedGoodsSys:function(){
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Website/GetsysRed',
					data: {},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.viewred = data.Response[0].sys_red
						}
					}
				});
			},
			getHotGoodsSys:function(){
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Website/GetsysHot',
					data: {},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.viewhot = data.Response[0].sys_hot
						}
					}
				});
			},
			getsysActive:function(){
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Website/GetsysActive',
					data: {},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.viewyh = data.Response[0].sys_active
						}
					}
				});
			},
			/**
			 * 首页商品
			 */
			getIndexGoodsList: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Website/GetindexList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							//this.hotGoodsList = data.Response
							this.activeGoodsList = data.Response.dyactivegoodslist //优惠专区
							this.dyadroollist = data.Response.dyadroollist  //轮播
							this.hotGoodsList = data.Response.dyhotgoodslist //热卖
							this.redGoodsList = data.Response.dyredgoodslist //推荐
						}
						this.refreshing = false;
						uni.stopPullDownRefresh();
					}
				});
			},
			/**
			 * 加载新品推荐
			 */
			loadRedGoodsList: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Goods/GetRedGoodsList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.redGoodsList = data.Response
						}
					}
				});
			},
			/**
			 * 加载优惠专区
			 */
			loadActiveGoodsList: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Goods/GetActiveGoodsList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						uni.hideLoading()
						console.log(data);
						if (data.ErrCode == 0) {
							this.activeGoodsList = data.Response 
						}
					}
				});
			},
			/**
			 * 加载优惠专区
			 */
			loadSwiper: function() {
				api.get({
					url: 'Website/GetindexList',
					data: {
						page: 1,
						pagesize: 15
					},
					success: data => {
						console.log(data);
						if (data.ErrCode == 0) {
							this.dyadroollist = data.Response.dyadroollist
						}
						this.refreshing = false;
						uni.stopPullDownRefresh();
					}
				});
			},
			loadAllGoodsCategory: function() {
				uni.showLoading({
					title:'加载中...'
				})
				api.get({
					url: 'Goods/GetAllGoodsCategoryList',
					data: {},
					success: data => {
						uni.hideLoading()
						console.info('loadAllGoodsCategory:'+JSON.stringify(data))
						if (data.ErrCode == 0) {
							// this.selectList = data.Response
							if(this.selectList.length<=0 || this.selectList[0].id != data.Response[0].id){
								for (var i = 0; i < data.Response.length; i++) {
									this.selectList.push(data.Response[i])
									if (this.selectList.length == 4) break;
								}
							}
						}
					}

				});
			},
			/**
			 * 跳转到商品详情
			 */
			toGoodsDetail: function(item) {
				console.log(item);
				uni.navigateTo({
					url: "/module/good/goodsDetails/goodsDetails?id=" + item.id
				});
			},
			/**
			 * 跳转更多
			 */
			toMore: function() {
				console.log('toMore')
				uni.switchTab({
					url: '/pages/allCategories/allCategories'
				});
			},
			/**
			 * 跳转到关键词
			 */
			toSearch: function(search) {
				// uni.switchTab({
				// 	url:'/pages/allCategories/allCategories'
				// });
				console.log(search)
				uni.navigateTo({
					url: '/module/good/goodsList/goodsList?key=' + search
				});
				// uni.navigateTo({
				// 	url:'/pages/goodsSearchResult/goodsSearchResult?key='+search
				// }); 
			},
			/**
			 * 跳转到关键词
			 */
			toSearchList: function(item) {
				// uni.switchTab({
				// 	url:'/pages/allCategories/allCategories'
				// });
				console.log(item)
				uni.navigateTo({
					url: '/module/good/goodsList/goodsList?category_id=' + item.id
				});
				// uni.navigateTo({
				// 	url:'/pages/goodsSearchResult/goodsSearchResult?key='+search
				// }); 
			},
			/**
			 * 跳转到新品推荐更多
			 */
			toRedGoodsListMore: function() {
				console.log('toRedGoodsListMore')
				uni.navigateTo({
					url: '/module/good/hotCommodity/hotCommodity'
				});
			},
			/**
			 * 跳转到优惠推荐更多
			 */
			toActiveGoodsListMore: function() {
				console.log('toactiveGoodsListMore')
				uni.navigateTo({
					url: '/module/good/activegoodslist/activegoodslist'
				});
			},
			/**
			 * 跳转到热卖推荐更多
			 */
			toHotGoodsListMore: function() {
				console.log('tohotGoodsListMore')
				uni.navigateTo({
					url: '/module/good/hotgoodslist/hotgoodslist'
				});
			},
			/**
			 * 跳转到轮播指定地址
			 */
			toBunnerUrl: function(item) {
				console.log('toBunnerUrl' + JSON.stringify(item))
				// location.href = 'https:/www.baidu.com'
				uni.navigateTo({
					url: '/module/my/myBanner/myBanner?key=' + item.url
				});
			},
			toInputResult: function() {
				uni.navigateTo({
					url: "/module/good/goodsSearchResult/goodsSearchResult?key=" + this.searchKey
				})
			},
			toInputSearch: function() {
				uni.navigateTo({
					url: "/module/good/goodsSearch/goodsSearch" 
				})
			}


		}
	}
</script>

<style lang="scss">
	page{
		background: #f7f7f7;
	}
	.content {

	}
	.recommend-bto>view {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background-color: #fde1e1;
	}
	.recommend-bto>view>text {
		color: #c6332f;
		font-size: 20upx;
	}
	.recommend-bto>text {
		font-size: 30upx;
		color: #c6332f;
	}
	.recommend-img1 {
		width: 315upx;
		height: 330upx;
	}
	.recommend-img2 {
		width: 160upx;
		height: 160upx;
	}
	.recommend-item>text {
		font-size: 22upx;
		color: #666666;
		margin: 12upx 0;
	}
	.recommend-item {
		margin-bottom: 24upx;
	}
	.recommend {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx 0 30upx;
		box-sizing: border-box;
	}
	.recommend-title {
		height: 68upx;
	}
	.recommend-title>view>text {
		font-size: 24upx;
		color: #999999;
	}
	.recommend-title>text {
		font-size: 30upx;
		color: #333333;
		font-weight: 500;
	}
	.index-nav-item image {
		width: 80upx;
		height: 80upx;
		border-radius: 40upx;
	}
	.index-nav-item text {
		font-size: 24upx;
		color: #333333;
		margin-top: 10upx;
	}
	.index-nav {
		width: 100%;
		height: 160upx;
		background-color: #fff;
	}
	.search input {
		
		height: 40upx;
		background-color: #ffffff;
		border-radius: 20upx;
		padding-left: 30upx;
		box-sizing: border-box;
	}
	.search {
		height: 120upx;
		background: #f7f7f7;
		width: 100%;
	}
	.search>.search_btn{
		color:#000;
		right:40upx;
		position: absolute;
	}
	.banner {
		width: 100%;
		height: 350rpx;
		border-radius: 20rpx;
	}
	.top-search{
			width: 95%;
			height: 80upx;
			background-color: #ffffff;
			border-radius: 10upx;
			padding: 0 26upx;
			box-sizing: border-box;
			
	}
	.cuIcon-search{
		position: absolute;
	}
	.top-search{
		font-size:24upx;
	}
	.lunbo{
		margin:0 20rpx;
		height:350rpx;
	}
	.hot{
		color:#888888;
		padding:30rpx;
		background-color: #fff;
		margin:30rpx 20rpx;
		border-radius: 25rpx;
		height:auto;
		.hot_top{
			display: flex;
			.hot_top_left{
				width:25%;
			}
			.hot_top_right{
				width:75%;
				display: flex;
				justify-content: space-between;
			}
		}
		.hotlist{
			.goods{
				display: flex;
				flex-wrap:wrap;
				margin-top:20rpx;
				.item{
					width:25%;
					.img{
						width:250rpx;
						height:150rpx;
					}
					.title{
						font-size: 22rpx;
						margin:15rpx 0;
						width:100%;
					}
					.price{
						color:#c6332f;
						font-weight: bold;
					}
				}
			}
			
		}
	}
	.discount{
		color:#888888;
		margin:60rpx 20rpx 20rpx;
		height:50rpx;
		.discount_top{
			display: flex;
			.discount_top_left{
				width:25%;
			}
			.discount_top_right{
				width:75%;
				display: flex;
				justify-content: space-between;
			}
		}
			
	}
	.discountlist{
		display: flex;
		flex-flow: row wrap;
		justify-content: space-around;
		margin:0rpx 10rpx;
		.discountitem{
			background-color: #fff;
			border-radius: 15rpx; 
			padding:15rpx;
		}
	   
	}
</style>
